<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>路由规则管理</title>
    <link rel="stylesheet" href="./css/M.css">
</head>

<body>
    <h1>ARP列表管理</h1>
    <div class="input-container">
        <label for="clearButton">清空</label>
        <button id="clearButton" onclick="clearInput()">清空列表</button>
        <form onsubmit="return validForm(this)">
            <label for="q_ip">数据：</label>
            <input id="q_ip" name="q_ip" type="text" placeholder="输入查询内容" style="flex: 1;">
            <button class="add-rule-btn">查询数据</button>
        </form>
    </div>

    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>IP</th>
                <th>MAC</th>
                <th>添加时间</th>
                <th>功能列表</th>
            </tr>
        </thead>
        <tbody id="tbody"></tbody>
    </table>
    <div class="pagination">
        <button onclick="prevPage()">上一页</button>
        <button onclick="nextPage()">下一页</button>
    </div>
    
    <script>
        let currentPage = 1; // 当前页码
        const pageSize = 10; // 每页条目数

        window.onload = function () {
            loaddata(); // 加载数据
        }

        function loaddata(page = 1) {
            fetch(`/cgi-bin/arp?limit=${pageSize}&offset=${(currentPage - 1) * pageSize}`)
            .then(resp => resp.json())
            .then(data => {
                console.log(data);
                if (data.code == 0) {
                    const tbody = document.getElementById("tbody");
                    tbody.innerHTML = ""; // 清空表格内容
                    data.datas.forEach(item => {
                        let tr = document.createElement("tr");
                        tr.innerHTML = `
                            <td>${item.id}</td>
                            <td>${item.ip}</td>
                            <td>${item.mac}</td>
                            <td>${item.add_time}</td>
                            <td>
                                <button class="btn delete-btn" onclick="deleteWord(${item.id})">删除</button>
                            </td>`;
                        tbody.append(tr);
                    });
                } else {
                    alert(data.msg);
                }
            });
        }

        function nextPage() {
            currentPage++;
            loaddata();
        }

        function prevPage() {
            if (currentPage > 1) {
                currentPage--;
                loaddata();
            }
        }

        function deleteWord(id) {
            if (confirm(`是否要删除这个条目?`)) {
                fetch(`/cgi-bin/delarp?id=${id}`)
                    .then(resp => resp.json())
                    .then(data => {
                        alert(data.msg);
                        if (data.code == 0) {
                            loaddata(); 
                        }
                    });
            }
        }

        function validForm(form) {
            let form_data = {
                ip: form.q_ip.value,
            };

            fetch("/cgi-bin/arp", {
                method: "POST",
                body: JSON.stringify(form_data),
                headers: {
                    "content-type": "application/json;charset=utf-8"
                }
            }).then(response => response.json())
              .then(data => {
                  if (data.code == 0) {
                      loaddata(); // 重新加载数据
                      form.reset(); // 清空表单
                  } else {
                      alert(data.msg);
                  }
              });
            return false; 
        }
         // 清空表格内容
        function clearInput() {
            const tbody = document.getElementById("tbody");
            tbody.innerHTML = ""; // 清空表格
            currentPage = 1;      // 重置当前页码
            document.getElementById("q_ip").value = ""; 
        }
    </script>
</body>

</html>
